<template>
  <div id="medicalRecord" class="person-detail">
    <div>
      <van-nav-bar title="就诊记录" :fixed="true" left-arrow @click-left="back" />
    </div>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="medicalRecord-body" v-for="(item, index) in feedBackContentList" :key="index">
          <div v-for="(item1,index1) in item" :key="index1">
            <div class="medicalRecord-big medicalRecord-line">
              {{ item1.date }}
            </div>
            <van-cell-group v-for="(ite, ind) in item1.list" :key="ind">
              <van-cell title="就诊时间" :value="ite.creationDate" />
              <van-cell title="患者姓名" :value="ite.username" />
              <van-cell title="患者年龄" :value="ite.age" />
              <van-cell title="诊室" :value="ite.clinic" />
              <van-cell title="初/复诊" :value="ite.isChecked == 1? '初诊' : ite.isChecked == 2 ?'复诊':''" />
              <van-cell title="检查项目" :value="ite.checkItem" />
              <van-cell title="治疗项目" :value="ite.cureItem" />
              <van-cell title="用药名称" :value="ite.pharmacy" />
              <van-cell title="消费金额" :value="ite.fee" />
            </van-cell-group>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "medicalRecord",
    components: {},
    data() {
      return {
        loading: false,
        finished: false,
        isLoading: false,
        count: 1,
        feedBackContent: [],
        feedBackContentList: []
      };
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      onLoad() {
        this.getInfo();
      },
      onRefresh() {
        this.feedBackContentList = []
        this.feedBackContent = []
        this.count = 1
        this.getInfo();
      },
      changeDateFirst(data) {
        let arr = [],
          count = 0
        arr[count] = []
        arr[count].push(data[0])
        data.forEach((item, index) => {
          if (item.creationDate == null) {
            return
          }
          if (index > 0) {
            if (arr[count][0].creationDate.split("/")[0] == item.creationDate.split("/")[0]) {
              arr[count].push(item)
            } else {
              count++
              arr[count] = []
              arr[count].push(item)
            }
          }
        })
        arr.forEach(item => {
          this.feedBackContentList.push(this.changeData(item))
        })
      },
      changeData(data) {
        let obj1 = {
            date: data[0].creationDate.split("/")[0] + "年1月",
            list: []
          },
          obj2 = {
            date: data[0].creationDate.split("/")[0] + "年2月",
            list: []
          },
          obj3 = {
            date: data[0].creationDate.split("/")[0] + "年3月",
            list: []
          },
          obj4 = {
            date: data[0].creationDate.split("/")[0] + "年4月",
            list: []
          },
          obj5 = {
            date: data[0].creationDate.split("/")[0] + "年5月",
            list: []
          },
          obj6 = {
            date: data[0].creationDate.split("/")[0] + "年6月",
            list: []
          },
          obj7 = {
            date: data[0].creationDate.split("/")[0] + "年7月",
            list: []
          },
          obj8 = {
            date: data[0].creationDate.split("/")[0] + "年8月",
            list: []
          },
          obj9 = {
            date: data[0].creationDate.split("/")[0] + "年9月",
            list: []
          },
          obj10 = {
            date: data[0].creationDate.split("/")[0] + "年10月",
            list: []
          },
          obj11 = {
            date: data[0].creationDate.split("/")[0] + "年11月",
            list: []
          },
          obj12 = {
            date: data[0].creationDate.split("/")[0] + "年12月",
            list: []
          },
          feedBackList = []
        data.forEach((item) => {
          if (!item.creationDate) {
            return
          }
          switch (item.creationDate.split("/")[1]) {
            case '01':
              obj1.list.push(item);
              break;
            case '02':
              obj2.list.push(item);
              break;
            case '03':
              obj3.list.push(item);
              break;
            case '04':
              obj4.list.push(item);
              break;
            case '05':
              obj5.list.push(item);
              break;
            case '06':
              obj6.list.push(item);
              break;
            case '07':
              obj7.list.push(item);
              break;
            case '08':
              obj8.list.push(item);
              break;
            case '09':
              obj9.list.push(item);
              break;
            case '10':
              obj10.list.push(item);
              break;
            case '11':
              obj11.list.push(item);
              break;
            case '12':
              obj12.list.push(item);
              break;
          }
        })

        if (obj12.list.length > 0) {
          feedBackList.push(obj12)
        }
        if (obj11.list.length > 0) {
          feedBackList.push(obj11)
        }
        if (obj10.list.length > 0) {
          feedBackList.push(obj10)
        }
        if (obj9.list.length > 0) {
          feedBackList.push(obj9)
        }
        if (obj8.list.length > 0) {
          feedBackList.push(obj8)
        }
        if (obj7.list.length > 0) {
          feedBackList.push(obj7)
        }
        if (obj6.list.length > 0) {
          feedBackList.push(obj6)
        }
        if (obj5.list.length > 0) {
          feedBackList.push(obj5)
        }
        if (obj4.list.length > 0) {
          feedBackList.push(obj4)
        }
        if (obj3.list.length > 0) {
          feedBackList.push(obj3)
        }
        if (obj2.list.length > 0) {
          feedBackList.push(obj2)
        }
        if (obj1.list.length > 0) {
          feedBackList.push(obj1)
        }
        return feedBackList
      },
      getInfo() {
        let data = {
          id: this.$route.query.id,
          curPage: this.count,
          pageSize: (this.count) * 10
        };
        mine.medicalArchive_v1_list_frontEnd_record(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            this.feedBackContent = [...this.feedBackContent, ...res.datas.records];
            this.changeDateFirst(this.feedBackContent)
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
          // this.isLoading = false;
          // if (res.code == "0") {
          //   if (res.datas != null) {
          //     if (this.count > 1) {
          //       this.feedBackContent = res.datas.records.concat(
          //         this.feedBackContent
          //       );
          //     } else {
          //       this.feedBackContent = [];
          //       this.feedBackContent = res.datas.records;
          //     }
          //     this.changeDateFirst(this.feedBackContent)
          //   }
          // } else {
          //   this.$toast(res.msg);
          // }
        });
      },
      back() {
        this.$router.go(-1);
      }
    }
  };
</script>
<style lang="scss">
  #medicalRecord {
    p {
      margin: 7px 0;
    }

    background: #fff;

    .medicalRecord-body {
      img {
        width: 100px;
        height: 100px;
      }

      >div:nth-child(2) {
        padding: 5px 0;
      }
    }

    .medicalRecord-big {
      font-size: 16px;
      font-weight: 600;
    }

    .medicalRecord-details {
      display: flex;

      >div:nth-child(2) {
        margin-left: 10px;

        >p:nth-child(2),
        >p:nth-child(3),
        >p:nth-child(4) {
          font-weight: 300;
        }
      }
    }

    .myResume-add {
      font-size: 32px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
    }

    .medicalRecord-line {
      border-bottom: 1px solid #e2e2e2;
      padding: 10px 20px;
    }

    .mine-out {
      padding: 50px 0;

      button {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
        font-size: 20px;
        color: #fff;
        letter-spacing: 0;
        text-align: center;
        background: #dc4630;
        border-radius: 20px;
      }
    }

    .van-cell__value {
      text-align: left;
    }

    .van-cell-group {
      border: 1px solid #f5f5f5;
      margin: 10px;
    }
  }
</style>